<template>
	<view class="content" :class="[isFull ? 'full' : 'no-full']" :style="{background:bgcolor}">
		<view class="empty-content" v-for ="img in imgs" :key="img.id">
			<image  class="empty-image" :src="img.src" mode="aspectFit"></image>
			<view class="empty-text">{{img.text}}</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 缺省页组件
	 * @property {String} type 
	 * 显示的缺省页类型取值7个： ['noAddress','noCar','noCollect','noCoupon','noData','noOrder','noProduct']
	 * @property {Boolean String} isFull 是否全屏
	 * @example <empty type="noData"></empty>
	 */
	import { list } from './empty'
	export default {
		props: {
			type: {
				type: String,
				default: 'noData'
			},
			isFull: {
				type: [Boolean ,String],
				default: false
			},
			bgcolor:{
				type: String,
				default: '#fff'
			}
		},
		computed: {
			imgs() {
				return this.list.filter( e => e.name === this.type)
			}
		},
		data() {
			return {
				list
			}
		}
	}
</script>

<style lang="scss">
.content{
	width: 100%;
	//@include page_bg_color($page-color);
	//background-color: $uni-bg-color;
	&.full{
		height: 100vh;
		position: absolute;
	}
	&.no-full{
		height: 100%;
	}
}
.empty-content {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.empty-image {
		width: 374rpx;
		height: 295rpx;
	}
	.empty-text {
		color: #ccc;
		font-size: 26rpx;
	}
}
</style>
